<template>
  <div>
    <div v-if="vehicleData">
      <p>车辆唯一标识：{{vehicleData.vehicleId}}</p>
      <p>车牌号：{{vehicleData.plateNumber}}</p>
      <p>车型：{{vehicleData.vehicleType}}</p>
      <p>颜色：{{vehicleData.color}}</p>
      <p>车辆品牌：{{vehicleData.vehicleBrand}}</p>
      <p>车联系统版本：{{vehicleData.vehicleEdition}}</p>
      <p>制造年份：{{vehicleData.makeYear}}</p>
      <p>日租金：{{vehicleData.dayPrice}}</p>
      <p>故障说明：{{vehicleData.faultName}}</p>
      <p>省/市/区：{{vehicleData.provinceName}} - {{vehicleData.cityName}} - {{vehicleData.districtName}}</p>
      <p>车辆图片：{{vehicleData.pic}}</p>
    </div>


    <div style="width: 1000px; margin: 0 auto">
      <!--    <el-rate v-model="comment.rate" :colors="['#F7BA2A', '#F7BA2A', '#F7BA2A']"-->
      <!--    allow-half-->
      <!--    show-text-->
      <!--    :texts="['极差', '失望', '一般', '满意', '惊喜']"-->
      <!--    ></el-rate>-->
      <div style="margin: 10px 0">
        <el-input type="textarea" placeholder="请输入评论" v-model="comment.content"></el-input>
        <div style="text-align: right;margin: 10px 0">
          <el-button type="primary" @click="submit">提交</el-button>
        </div>
      </div>


      <div style="margin: 20px 0">
        <div style="margin: 10px 0; font-size: 24px; padding: 10px 0;border-bottom: 1px solid #ccc;text-align: left">评论列表</div>

        <div style="margin: 20px 0;text-align:left;">
          <div style="padding: 10px 0;" v-for="item in commentList" :key="item.id">
            <div style="display: flex" v-if="item.pid==0">
              <div style="width: 80px;"><el-avatar :size="50" :src="'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'"></el-avatar></div>
              <div style="flex: 1">
                <div>{{item.username}}<span style="margin-left: 10px">{{item.createTime}}</span></div>
                <div style="margin-top: 10px; color: #666">{{item.content}}</div>
                <!--评论多级回复--->
                <div>
                  <el-button type="text" @click="reply(item.id,item.username)">回复</el-button>
                </div>
                <!--回复列表-->
                <div v-if="item.children.length" style="margin-left: 100px;background-color: aliceblue;padding: 10px; border-radius: 10px">
                  <div v-for="sub in item.children" :key="sub.id">
                    <div style="padding: 5px 0"><b style="cursor: pointer" @click="reply(sub.pid,sub.username)">{{sub.username}}</b><span>回复<span style="color: cornflowerblue">@{{sub.target}}</span><span>{{sub.content}}</span></span>
                      <!--                  <span style=>{{sub.createTime}}</span>-->
                    </div>
                  </div>

                </div>
              </div>
            </div>

          </div>
        </div>
        <el-dialog title="回复" :visible.sync="dialogFormVisibles" width="40%">
          <el-form :model="replyComment">
            <el-form-item label="回复内容" :label-width="100">
              <el-input v-model="replyComment.content" autocomplete="off" style="width: 80%;"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisibles = false">取 消</el-button>
            <el-button type="primary" @click="saveReply">确 定</el-button>
          </div>
        </el-dialog>
      </div>


    </div>

  </div>


</template>


<script>
export default {
  name: "CommentView",
  data() {
    return {
      vehicleData: null,
      dialogFormVisible:false,
      formLabelWidth:'120px',
      form:{},
      comment:{
        rate:5,
        content:''
      },
      commentList:[],
      dialogFormVisibles:false,
      replyComment:{}
    }
  }, methods: {
    // getVehicles(){
    //   let vid = sessionStorage.getItem("vid");
    //   this.axios.post("http://localhost:8989/vehicles/xq?vid="+vid).then(res=>{
    //     console.log(res.data.data);
    //     this.form=res.data.data;
    //     if(this.form){
    //       if(this.form.status==0){
    //         this.form.status='空闲';
    //       }else if(this.form.status==1){
    //         this.form.status='租用中';
    //       }
    //     }
    //   })
    // }
    submit(){
       this.comment.vehicleId = sessionStorage.getItem("vid")
      this.axios.post("/vehicle/comment",this.comment).then(res=>{
        if(res.data.code==200){
          this.$message.success("成功");
          this.load();
        }
      })
    }
    ,load(){
      let vid = sessionStorage.getItem("vid")
      this.axios.get("/vehicle/commentList?vehicleId="+vid).then(res=>{
        this.commentList=res.data.data;
        console.log("===="+res.data);
      })
    }
    ,reply(pid,target){
      this.replyComment = {pid: pid,target: target};
      this.dialogFormVisibles=true;
    }
    ,saveReply() {
      this.replyComment.vehicleId = sessionStorage.getItem("vid")
      this.axios.post("/vehicle/comment", this.replyComment).then(res => {
        if (res.data.code == 200) {
          this.load();
          this.dialogFormVisibles = false;
          this.$notify.success("成功");



        }
      })
    }
  }, created() {
    this.vehicleData = this.$route.params.rowData;
    // this.getVehicles();
    this.load();

  }
}
</script>

<style scoped>

</style>
